@CHARSET "UTF-8";

@def wruppleOrange #ff6600;
@def orange #ff8533;
@def wruppleBlue #0066ff;
@def mediumBlue #66a3ff;
@def darkBlue #004dc0;
@def blueDarkGray #262b33;
@def controlGray #cecece;
@def controlGrayDark #a8a8a8;
@def lightGray #ededed;
@def lightGrayNestedElement #e6e6e6;
@def textColor #4a5564;
@url leftButtonURL leftButton;
@url rightButtonURL rightButton;
@url whiteButtonURL whiteButton;
	
	
.cellLightBlueRightBorder {
	border-right: 1px solid mediumBlue;
}

.cellLightGrayRightBottomBorders {
	border-right: 1px solid lightGray;
	border-bottom: 1px solid lightGray;
}

.darkGray {
	background-color: textColor;
	color: white;
}

.transparentNoBorders {
	opacity: .8;
	background-color: lightGray;
	border-style: dotted;
	border-width: 1px;
	border-color: mediumBlue;
}

/*
 *CMS SKin
 */
.cms-content-footer {
	border-bottom: 1px dotted lightGray;
}

.cms-commentThread {
	
}

/*
 * Tree navigator
 */
.treenavNode {
	
}

.treenavNode-selected {
	background-color: wruppleBlue;
}

.treenavNode-focused {
	background-color: wruppleOrange;
}

/*
 *Navigation VIew Panel
 */
@sprite .navigationPanel-head {
	gwt-image: 'frameHeadGray';
	position: absolute;
	top: 0px;
	font-weight: bold;
	cursor: default;
	color: blueDarkGray;
	height: value('frameHead.getHeight', 'px');
	text-shadow: 0 1px 1px white;
	padding-bottom: 3px;
}

.navigationPanel-head a {
	/* Use the highest button height to ensure that text will vertically align on all buttons 
	line-height: 46px;	 		*/
	color: blueDarkGray;
	font-weight: bold;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	padding: 4px;
}

.navigationPanel-head a.navigationPanel-button-back {
	margin: 3px auto;
	/* Put a 1 pixel blur black shadow below the button's text   */
	text-shadow: #fff 0px 1px 1px;
	border-width: 0px 3px 0px 10px;
	/* -webkit-border-image divides the leftButton image into 2 corners and middle part.	*/
	/* The left corner is 12 pixels wide. The right corner is 5 pixels wide and the middle part is 1 pixel. */
	-moz-border-image: leftButtonURL 0 7 0 14;
	-webkit-border-image: leftButtonURL 0 7 0 14;
	border-image: leftButtonURL 0 7 0 14;
}

.navigationPanel-head a.navigationPanel-button-forward {
	margin: 3px auto;
	/* Put a 1 pixel blur black shadow below the button's text   */
	text-shadow: #fff 0px 1px 1px;
	border-width: 0px 10px 0px 3px;
	/* -webkit-border-image divides the leftButton image into 2 corners and middle part.	*/
	/* The left corner is 12 pixels wide. The right corner is 5 pixels wide and the middle part is 1 pixel. */
	-moz-border-image: rightButtonURL 0 14 0 7;
	-webkit-border-image: rightButtonURL 0 14 0 7;
	-opera-border-image: rightButtonURL 0 14 0 7;
	border-image: rightButtonURL 0 14 0 7;
}

.navigationPanel-head a.view-control {
	margin: 3px auto;
	border-width: 0px 7px 0px 7px;
	/*  Put a 1 pixel blur white shadow below the button's text  */
	text-shadow: #fff 0px 1px 1px;
	/* Note that the -webkit-border-image values are given as  0 14 0 14 and not 0px 14px 0px 14px */
	-webkit-border-image: whiteButtonURL 0 7 0 7;
	-moz-border-image: whiteButtonURL 0 7 0 7;
	-opera-border-image: whiteButtonURL 0 7 0 7;
	border-image: whiteButtonURL 0 7 0 7;
}

@
if user.agent ie7 ie8 { /* Rendering fix */ .navigationPanel-head
	a.view-control { margin:3pxauto;
	color: white;
	font-weight: bold;
	text-decoration: underline;
}

.navigationPanel-head a.navigationPanel-button-forward {
	margin: 3px auto;
	color: white;
	font-weight: bold;
	text-decoration: underline;
}

.navigationPanel-head a.navigationPanel-button-back {
	margin: 3px auto;
	color: white;
	font-weight: bold;
	text-decoration: underline;
}

}
.navigationPanel-title {
	
}

.navigationPanel-breadcrumb {
	
}

.navigationPanel-breadcrumb-current a {
	background-color: mediumBlue;
}

.navigationPanel-breadcrumbBar {
	margin-left: 8px;
	margin-right: 8px;
	background-color: lightGray;
	border-left: 1px solid controlGrayDark;
	border-bottom: 1px solid controlGrayDark;
	border-right: 1px solid controlGrayDark;
}

.navigationPanel-breadcrumb-link {
	color: wruppleOrange;
	text-decoration: underline;
}

/*
 *Context menu
 */
@sprite .contextMenu-head {
	gwt-image: 'stackHead';
	color: textColor;
	height: value('stackHead.getHeight', 'px');
	text-shadow: 0 1px 1px white;
	cursor: pointer;
	border-bottom: 1px solid black;
}

/*
 *Menu Bar
 */
.applicationItem-menu {
	height: 40px;
}

/*
 * Selectable Table
 */
.selectableTable-highlight {
	cursor: default;
	color: white;
	background-color: wruppleBlue;
}

.selectableTable-selected {
	cursor: default;
	background-color: wruppleOrange;
}

.sortableTable-header {
	background-color: blueDarkGray;
	color: white;
	cursor: pointer;
}

.sortableTable-row-odd {
	cursor: default;
	background-color: mediumBlue;
}

.sortableTable-row-even {
	cursor: default;
}

/*
 *	Decorated Frame
 */
.frameHeadGeneral {
	cursor: default;
	color: darkBlue;
	height: value('frameHead.getHeight', 'px');
	text-shadow: 0 1px 1px white;
}

@sprite .frameHead-minimize {
	gwt-image: 'headMinimize';
	width: value('headMinimize.getWidth', 'px');
	height: value('headMinimize.getHeight', 'px');
	cursor: pointer;
	position: absolute;
	right: 0px;
}

@sprite .frameHead-restore {
	gwt-image: 'headRestore';
	width: value('headRestore.getWidth', 'px');
	height: value('headRestore.getHeight', 'px');
	cursor: pointer;
	position: absolute;
	right: value('headMinimizeHover.getWidth', 'px');
}

@sprite .frameHead-maximize {
	gwt-image: 'headMaximize';
	width: value('headMaximize.getWidth', 'px');
	height: value('headMaximize.getHeight', 'px');
	cursor: pointer;
	position: absolute;
	right: value('headMinimizeHover.getWidth', 'px');
}

@sprite .frameHead-minimize:hover {
	gwt-image: 'headMinimizeHover';
	width: value('headMinimizeHover.getWidth', 'px');
	height: value('headMinimizeHover.getHeight', 'px');
}

@sprite .frameHead-restore:hover {
	gwt-image: 'headRestoreHover';
	width: value('headRestoreHover.getWidth', 'px');
	height: value('headRestoreHover.getHeight', 'px');
}

@sprite .frameHead-maximize:hover {
	gwt-image: 'headMaximizeHover';
	width: value('headMaximizeHover.getWidth', 'px');
	height: value('headMaximizeHover.getHeight', 'px');
}

@sprite .frameHead-top {
	gwt-image: 'frameHead';
	position: absolute;
	top: 0;
	left: value('frameHeadLeft.getWidth', 'px');
	right: value('frameHeadRight.getWidth', 'px');
	padding-top: 2px;
	padding-left: 8px;
	font-weight: bold;
}

@sprite .frameHead-leftCorner {
	gwt-image: 'frameHeadLeft';
	position: absolute;
	top: 0;
	left: 0;
}

@sprite .frameHead-rightCorner {
	gwt-image: 'frameHeadRight';
	position: absolute;
	top: 0;
	right: 0;
}

@sprite .contentAreaRightBorder {
	gwt-image: 'shadowRight';
	position: absolute;
	/*top: 0;
	right: 0;
	height: 100%;*/
}

@sprite .contentAreaLeftBorder {
	gwt-image: 'shadowLeft';
	position: absolute;
	/*top: 0;
	right: 0;
	height: 100%;*/
}

@sprite .contentAreaBottomBorder {
	gwt-image: 'shadowBottom';
	position: absolute;
	bottom: 0;
	right: value('shadowRightCorner.getWidth', 'px');
	left: value('shadowRightCorner.getWidth', 'px');
}

@sprite .contentAreaBottomRightBorder {
	gwt-image: 'shadowRightCorner';
	position: absolute;
	bottom: 0;
	right: 0;
}

@sprite .contentAreaBottomLeftBorder {
	gwt-image: 'shadowLeftCorner';
	position: absolute;
	bottom: 0;
	left: 0;
}

/*
 *NATIVE LOOKING UI
 */
.nativeLooking {
	background-color: lightGray;
	color: textColor;
}

.table-row-odd {
	cursor: default;
	border-bottom: 1px dotted black;
}

/*
 *GWT widgets
 *
 */
.gwt-MenuBar-horizontal .gwt-MenuItem {
	padding: 0px 5px;
	vertical-align: bottom;
	color: #666666;
	font-weight: bold;
}

@if user.agent ie7 ie6 { .gwt-MenuBar-horizontal .gwt-MenuItem { padding:0px0px;
	background-color: white;
	vertical-align: bottom;
	color: #666666;
	font-weight: bold;
}
}